import { Watermark } from "antd";

import GlobalLoading from "@/components/global-loading";
import { useSelector } from "@/hooks/use-selector";
import { useUserDetail } from "@/layouts/common/use-use-detail";
import { useGlobalStore } from "@/stores/global";

import MessageHandle from "../layout1/message-handle/index";

import Header from "./header";
import Slide from "./slide";

function Layout() {
    const { lang } = useGlobalStore(useSelector("lang"));
    const { loading } = useUserDetail();

    if (loading) {
        return <GlobalLoading />;
    }

    return (
        <Watermark content="react 项目练习">
            <div
                key={lang}
                className="overflow-hidden"
            >
                <MessageHandle />
                <Header />
                <Slide />
            </div>
        </Watermark>
    );
}

export default Layout;
